<template>
  <div class="task-detail-container">
    <!-- 任务基本信息 -->
    <div class="task-header">
      <h2 class="task-title">{{ taskInfo.title }}</h2>
      <div class="task-meta">
        <span class="price">￥{{ taskInfo.price }}</span>
        <span class="status">{{ taskInfo.status }}</span>
      </div>
    </div>

    <!-- 任务详细描述 -->
    <div class="task-content">
      <div class="section">
        <h3>需求描述</h3>
        <p>{{ taskInfo.description }}</p>
      </div>

      <div class="section">
        <h3>技术要求</h3>
        <div class="tech-tags">
          <span v-for="(tag, index) in taskInfo.techStack" 
                :key="index" 
                class="tech-tag">
            {{ tag }}
          </span>
        </div>
      </div>

      <div class="section">
        <h3>项目周期</h3>
        <p>预计工期：{{ taskInfo.duration }}天</p>
        <p>截止日期：{{ taskInfo.deadline }}</p>
      </div>
    </div>

    <!-- 发单人信息 -->
    <div class="publisher-info">
      <h3>发布者信息</h3>
      <div class="publisher">
        <img :src="taskInfo.publisher.avatar" class="avatar">
        <div class="info">
          <div class="name">{{ taskInfo.publisher.name }}</div>
          <div class="contact">联系方式：{{ taskInfo.publisher.contact }}</div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleAcceptTask">接单</el-button>
      <el-button @click="handleContact">联系发布者</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TaskDetail',
  data() {
    return {
      taskInfo: {
        title: 'Vue3企业官网开发',
        price: 5000,
        status: '招募中',
        description: '需要开发一个现代化的企业官网，包含首页、产品展示、新闻中心等基本功能...',
        techStack: ['Vue3', 'TypeScript', 'Element Plus', 'Vite'],
        duration: 15,
        deadline: '2024-04-30',
        publisher: {
          name: '张先生',
          avatar: 'https://placeholder.com/150',
          contact: '13800138000'
        }
      }
    }
  },
  methods: {
    handleAcceptTask() {
      this.$confirm('确认接受此任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 处理接单逻辑
        this.$message.success('接单成功！')
      }).catch(() => {})
    },
    handleContact() {
      // 处理联系逻辑
      this.$router.push('/communication')
    }
  }
}
</script>

<style scoped>
.task-detail-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.task-header {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.task-title {
  margin: 0 0 15px 0;
  font-size: 24px;
}

.task-meta {
  display: flex;
  gap: 20px;
}

.price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

.status {
  color: #409eff;
  font-size: 16px;
}

.task-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.section {
  margin-bottom: 20px;
}

.section h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-tag {
  background: #f0f2f5;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.publisher-info {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.publisher {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
</style> 